import { Component } from 'react';
import Footer from './components/Footer';
import Header from './components/Header';
import List from './components/List';
import './App.css';

class App extends Component {
  // 状态在哪里，操作状态的方法就在哪里
  // 初始化状态
  state = {
    todos: [
      { id: '001', name: '吃饭', done: true },
      { id: '002', name: '睡觉', done: true },
      { id: '003', name: '打代码', done: false },
    ]
  }
  // addTodo用于添加一个todo，接收的参数是todo对象
  addTodo = (todoObj) => {
    // 获取原todos
    const { todos } = this.state
    // 追加一个todo对象
    const newTodos = [todoObj, ...todos]
    // 更新状态
    this.setState({ todos: newTodos })
  }
  // updateTodo用于更新一个todo对象
  updateTodo = (id, done) => {
    // 获取原todos
    const { todos } = this.state
    // 匹配处理数据
    const newTodos = todos.map(todoObj => {
      if (todoObj.id === id) return { ...todoObj, done: done }
      else return todoObj
    })
    // 更新状态
    this.setState({ todos: newTodos })
  }
  // deleteTodo 用于删除一个todo对象
  deleteTodo = (id) => {
    // 获取原来的todos
    const { todos } = this.state
    // 删除指定id 的todo对象
    const newTodos = todos.filter((todoObj) => {
      return todoObj.id !== id
    })
    // 更新状态
    this.setState({ todos: newTodos })
  }
  // checkAllTodo用于勾选所有
  checkAllTodo = (done) => {
    // 获取原来的todos
    const { todos } = this.state
    // 设置为勾选
    const newTodos = todos.map((todoObj) => {
      return {
        ...todoObj,
        // done: done
        done
      }
    })
    // 更新状态
    this.setState({ todos: newTodos })
  }
  // clearAllDoneTodo 用于清除已完成的todo
  clearAllDoneTodo = () => {
    // 获取todos
    const { todos } = this.state
    // 处理数据
    const newTodos = todos.filter(todo => !todo.done)
    console.log(newTodos);
    this.setState({ todos: newTodos })
  }
  render() {
    const { todos } = this.state
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo} />
          <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo} />
          <Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDoneTodo={this.clearAllDoneTodo}/>
        </div>
      </div>
    )
  }
}

export default App;
